<template>
	<div class="father">
		<h3>父组件</h3>
		<!-- $event,是一个占位符,默认不带括号不传参数时,事件响应函数可以接收到该对象值.
		 需要带括号时,需要使用该占位符以传递事件对象参数,占位符的位置不限 -->
		<button @click="fatherClick(1, 2, $event)">fatherClick</button>
		<!-- 给子组件child绑定自定义事件 -->
		<!-- 事件名推荐用kebab-case命名 -->
		<Child @send-toy="saveToy" />
		<h4 v-show="toy">子给的: {{ toy }}</h4>
	</div>
</template>

<!-- 自定义事件,通常用来从子传递给父 -->
<script setup lang="ts" name="Father">
import Child from './Child.vue';
import { ref } from 'vue';
let toy = ref('');

function fatherClick(a: number, b: number, c: Event) {
	console.log('fatherClick: ', a, b, c);
}

function saveToy(value: string) {
	console.log('saveToy: ', value);
	toy.value = value;
}

</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-right: 5px;
}
</style>